<template>
  <div id="SiderBar">
    <button
      class="biao"
      :style="{ transform: buttonTransform }"
      @click="togglePopup"
    >
      <img src="@/assets/left.png" alt="点击出现左侧边栏" />
    </button>
    <div class="popup" :class="{ show: isPopupVisible }">
      <dv-border-box-13 class="main">
        <div class="content">
          <!-- 右侧弹出的内容 -->
          <ul class="chouti">
            <div class="ct">
              <li
                v-for="(stuInfo, index) in stuInfos"
                :key="index"
                :class="{ selected: index === selectedStuInfoIndex }"
                @click="selectStuName(index)"
              >
                {{ stuInfo.stuName }}
              </li>
            </div>
          </ul>
        </div>
        <div class="anniu">
          <el-button class="niu" type="primary" @click="goToFirst"
            >返回首页</el-button
          >
        </div>
      </dv-border-box-13>
    </div>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  data() {
    return {
      isPopupVisible: false, // 控制右侧弹出框的显示与隐藏
      buttonScale: 1, // 按钮的初始缩放比例
      buttonTransform: "", // 按钮的变换样式
      classInfo: [], // 订阅的消息
      selectedStuInfoIndex: null,
      stuInfos: [],
      drawerStuId: "",
    };
  },
  methods: {
    goToFirst() {
      const currentRoute = this.$router.currentRoute.path;
      if (currentRoute !== "/school") {
        // 跳转到目标路由
        this.$router.push("/school");
      }
    },
    selectStuName(index) {
      // 检查是否已经选中了当前班级
      if (index === this.selectedStuInfoIndex) {
        // 如果已经选中了当前班级，则取消选中并恢复原始状态
        this.drawerStuId = "";
        this.selectedStuInfoIndex = null;
      } else {
        // 如果未选中当前班级，则选中它
        this.drawerStuId = this.stuInfos[index].stuId;
        this.selectedStuInfoIndex = index;
        this.postStuInfo(this.drawerStuId);
      }
    },
    initStuInfo() {
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/stuinfo/listname/${this.classInfo.year}/${this.classInfo.college}/${this.classInfo.major}/${this.classInfo.className}`
        ),
        method: "get",
      }).then((response) => {
        // console.log("一个班学生,", response.data.data);
        this.stuInfos = response.data.data;
      });
    },
    postStuInfo(stuId) {
      pubsub.publish("selectStuInfo", stuId);
    },
    togglePopup() {
      this.isPopupVisible = !this.isPopupVisible; // 切换弹出框的显示状态
    },
    handleOutsideClick(event) {
      // 检查点击的区域是否在弹出框外部
      if (!this.$el.contains(event.target)) {
        // 点击外部，隐藏弹出框
        this.isPopupVisible = false;
      }
    },
    updateButtonStyle() {
      // 每隔5秒更新按钮的样式
      setInterval(() => {
        // 放大按钮并向左移动
        this.buttonScale = 1.2;
        this.buttonTransform = `scale(${this.buttonScale}) translateX(-10px)`;
        // 1秒后恢复初始状态
        setTimeout(() => {
          this.buttonScale = 1;
          this.buttonTransform = "";
        }, 1000);
      }, 5000);
    },
  },
  mounted() {
    this.pubId = pubsub.subscribe(
      "selectClassInfoToPerson",
      (msgName, data) => {
        this.classInfo = data;
        this.initStuInfo();
      }
    );
    // 监听整个文档的点击事件
    document.addEventListener("click", this.handleOutsideClick);
    // 启动定时器
    this.updateButtonStyle();
  },
  beforeDestroy() {
    // 在组件销毁之前移除事件监听器
    document.removeEventListener("click", this.handleOutsideClick);
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.biao {
  width: 30px;
  height: 30px;
  padding: 12px;
  border-radius: 50%;
  border: 3px solid #17dceb;

  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /* background-image: url("@/assets/left.png"); */
  /* background-size: cover;
  background-position: center; */
  background-color: transparent;
}

/* .biao:hover{
  transform: scale(1.2);
  transform: translateX(-10px);
} */
img {
  width: 15px;
  height: 15px;
  /* background-color: beige; */
}
.popup {
  width: 200px;
  height: 100%;
  position: fixed;
  top: 0;
  right: -240px; /* 初始状态右侧不可见 */
  background-color: transparent;
  /* border-left: 1px solid #ccc; */
  transition: right 0.3s ease; /* 使用过渡效果 */
}

.popup.show {
  right: 0px; /* 显示右侧弹出框 */
}
.main {
  position: relative;
  padding: 10px;

  background: rgba(112, 140, 210, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(112, 140, 210, 0.6);
  border-bottom: 1px solid rgba(112, 140, 210, 0.35);
  border-left: 1px solid rgba(112, 140, 210, 0.35);
}
.anniu {
  position: absolute;
  bottom: 15px;
  right: 0;

  /* color: #79e2f9;
  background: rgba(112, 140, 210, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(112, 140, 210, 0.6);
  border-bottom: 1px solid rgba(112, 140, 210, 0.35);
  border-left: 1px solid rgba(112, 140, 210, 0.35); */
}
.niu {
  color: #fff;
  background: rgba(112, 140, 210, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(112, 140, 210, 0.6);
  border-bottom: 1px solid rgba(112, 140, 210, 0.35);
  border-left: 1px solid rgba(112, 140, 210, 0.35);
}
.content {
  /* background-color: aquamarine; */
  height: 96%;
  margin-top: 13px;
  padding: 15px 0;
  overflow: hidden;
}
.content ul {
  /* background-color: antiquewhite; */
  height: 98%;

  /* margin-top: 5px; */
}
.selected {
  background-color: rgb(121, 226, 249, 0.2); /* 修改选中项的背景颜色为黄色 */
}
.content .chouti {
  width: 110%;
  overflow: auto;
}
.content .chouti li {
  color: #fff;
}
</style>
